<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .div1 {
            height: 100px;
        }
    </style>
</head>

<body>
    <div class="div1">
        我是用来撑开位置的
    </div>
    <div id="div-1">我是获取定位的div</div>
</body>
<script>
    // 获取dom元素
    const obj = document.querySelector("#div-1")

    console.log("获取元素的宽度（width+padding）：", obj.clientWidth);
    console.log("获取元素的高度（height+padding）：", obj.clientHeight);
    console.log("获取对于父元素的left：", obj.offsetLeft);
    console.log("元素相对于父元素的top：", obj.offsetTop);
    console.log("元素的高度(height+padding+border)：", obj.offsetHeight);


    let elContent = obj.getBoundingClientRect()
    // 获取滚动条位置
    let scrollX = document.documentElement.scrollLeft || document.body.scrollLeft
    let scrollY = document.documentElement.scrollTop || document.body.scrollTop
    console.log("元素在窗口的位置x：",elContent.x + scrollX)
    console.log("元素在窗口的位置x：",elContent.y + scrollY)

</script>

</html>